
<template>
  <div class="progress-bar">
    <div class="progress-bar__outer" :style="`height: ${strokeWidth||16}px`">
      <div class="progress-bar__inner" :style="`width:${percentage}%;background-color: ${color};`">
        <div class="progress-bar__innerText">{{text||`${percentage}%`}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // 微小弹窗
  //用法示例：src/page/inquiryRegister/list.vue
  name: "progressBar",
  props: {
    percentage: {//百分比
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: "#004293"
    }, //进度条背景色
    text:String,
    strokeWidth:String
  },
  data() {
    return {
      visible: false
    };
  },
  methods: {
    noFun() {
      //取消函数
      this.visible = false;
      this.$emit("onCancel");
    },
    okFun() {
      //确定函数
      this.visible = false;
      this.$emit("onConfirm");
    }
  }
};
</script>

<style lang="scss" scoped>
.progress-bar {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    box-sizing: border-box;
}
.progress-bar__outer {
    height: 16px;
    border-radius: 100px;
    background-color: #ebeef5;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}
.progress-bar__inner {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #409eff;
    text-align: left;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    line-height: 1;
    white-space: nowrap;
    transition: width .6s ease;
}
.progress-bar__innerText {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-size: 10px;
    margin: 0 5px;
}
.progress-bar__inner:after {
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
}
</style>

